<template>
  <div class="app-container">
    <el-tabs v-model="queryParams.orderStatus" @tab-click="onOrderStatusChange">
      <el-tab-pane v-for="item in status" :key="item.name" :label="item.label" :name="item.name" />
    </el-tabs>
    <el-form ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="68px">
      <el-form-item prop="userId">
        <el-select v-model="queryParams.userId" placeholder="请选择用户ID" clearable>
          <el-option v-for="item in vehicles" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item prop="vehicleNo">
        <el-select v-model="queryParams.vehicleNo" placeholder="请选择餐车编号" clearable>
          <el-option v-for="item in vehicles" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item prop="vehicleName">
        <el-select v-model="queryParams.vehicleName" placeholder="请选择餐车名称" clearable>
          <el-option v-for="item in vehicles" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item prop="boxIndex">
        <el-select v-model="queryParams.boxIndex" placeholder="请选择餐车柜格" clearable>
          <el-option v-for="item in vehicles" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item prop="orderNo">
        <el-input v-model="queryParams.orderNo" clearable placeholder="输入订单编号" @keyup.enter.native="toQuery" />
      </el-form-item>
      <el-form-item prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="创建开始时间"
          end-placeholder="创建结束时间"
          range-separator="至"
          unlink-panels
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="vehicleBoxGoodsOrderList">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column type="index" label="序号" align="center">
        <template slot-scope="{$index}">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        width="200"
        prop="userId"
        align="center"
        label="用户ID"
      />
      <el-table-column
        width="200"
        prop="orderNo"
        align="center"
        label="订单号"
      />
      <el-table-column
        width="200"
        prop="orderStatus"
        align="center"
        label="订单状态"
      />
      <el-table-column
        width="200"
        prop="orderStatus"
        align="center"
        label="订单状态"
      />
      <el-table-column
        width="200"
        prop="vehicleId"
        align="center"
        label="餐车ID"
      />
      <el-table-column
        width="200"
        prop="vehicleNo"
        align="center"
        label="餐车编号"
      />
      <el-table-column
        width="200"
        prop="vehicleName"
        align="center"
        label="餐车名称"
      />
      <el-table-column
        width="200"
        prop="boxIndex"
        align="center"
        label="餐车柜格"
      />
      <el-table-column
        align="center"
        label="单价">
        <template slot-scope="scope">
          <span>{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="200"
        prop="count"
        align="center"
        label="数量"
      />
      <el-table-column
        align="center"
        label="总价">
        <template slot-scope="scope">
          <span>{{ scope.row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="200"
        prop="branchCode"
        align="center"
        label="分行4位iGoal码"
      />
      <el-table-column
        width="200"
        prop="channel"
        align="center"
        label="渠道编码"
      />
      <el-table-column
        width="200"
        prop="epayCode"
        align="center"
        label="项目编号"
      />
      <el-table-column
        width="200"
        prop="merchantId"
        align="center"
        label="主商户编号"
      />
      <el-table-column
        width="200"
        prop="traceNo"
        align="center"
        label="交易流水号"
      />
      <el-table-column
        width="200"
        prop="traceUserId"
        align="center"
        label="客户编号"
      />
      <el-table-column
        width="200"
        prop="transCode"
        align="center"
        label="交易码"
      />
      <el-table-column
        width="200"
        prop="transFlag"
        align="center"
        label="交易标志"
      />
      <el-table-column
        width="200"
        prop="transSeqNum"
        align="center"
        label="交易序列号"
      />
      <el-table-column
        width="200"
        align="center"
        label="交易时间戳">
        <template slot-scope="scope">
          <span>{{ scope.row.timeStamp }}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="200"
        prop="input1"
        align="center"
        label="标识字段1"
      />
      <el-table-column
        width="200"
        prop="input2"
        align="center"
        label="标识字段2"
      />
      <el-table-column
        width="200"
        prop="input3"
        align="center"
        label="标识字段3"
      />
      <el-table-column
        width="200"
        prop="input4"
        align="center"
        label="标识字段4"
      />
      <el-table-column
        width="200"
        prop="input5"
        align="center"
        label="标识字段5"
      />
      <el-table-column
        width="200"
        prop="amtRule"
        align="center"
        label="计算规则"
      />
      <el-table-column
        width="200"
        prop="payBillCount"
        align="center"
        label="子账单数"
      />
      <el-table-column
        width="200"
        prop="payBillCount"
        align="center"
        label="子账单总金额"
      />
      <el-table-column
        width="200"
        prop="payBillNo"
        align="center"
        label="子账单号"
      />
      <el-table-column
        width="200"
        prop="optionName"
        align="center"
        label="套餐名称"
      />
      <el-table-column
        width="200"
        prop="optionCode"
        align="center"
        label="套餐编号"
      />
      <el-table-column
        width="200"
        prop="optionAmt"
        align="center"
        label="套餐金额"
      />
      <el-table-column
        width="200"
        prop="payType"
        align="center"
        label="交易码"
      />
      <el-table-column
        width="200"
        prop="payAcc"
        align="center"
        label="支付账号"
      />
      <el-table-column
        width="200"
        prop="transPaySeq"
        align="center"
        label="支付系统流水号"
      />
      <el-table-column
        width="200"
        prop="transDate"
        align="center"
        label="支付交易日期"
      />
      <el-table-column
        width="200"
        prop="transTime"
        align="center"
        label="支付交易时间"
      />
      <el-table-column
        width="200"
        prop="settleDate"
        align="center"
        label="会计日期"
      />
      <el-table-column
        width="200"
        prop="clearType"
        align="center"
        label="清算模式"
      />
      <el-table-column
        width="200"
        prop="cacheMem"
        align="center"
        label="缓存域信息"
      />
      <el-table-column
        width="200"
        prop="resendTimes"
        align="center"
        label="销账通知重发次数"
      />
      <el-table-column
        prop="numOpenMerchantOrder"
        width="160"
        align="center"
        label="第三方支付平台商户订单号">
        <template slot-scope="scope">
          <span>{{ scope.row.numOpenMerchantOrder }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="300"
      >
        <template slot-scope="{row}">
          <el-button
            type="primary"
            size="mini"
            @click="viewDetail(row.id)"
          >详情</el-button>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改订单对话框 -->
    <el-dialog title="订单详情" :visible.sync="open" width="800px" append-to-body>
      <el-form:data="form" label-position="left">
        <el-form-item label="订单编号">
          <span>{{ form.orderNo }}</span>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-tag>{{ getStatus(form.orderStatus) }}</el-tag>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { multiply } from '@/utils/math'
import { listVehicleOrder, getVehicleOrder } from '@/api/order/vehicleOrder'
import { listAllVehicle } from '@/api/vehicle/vehicle'

export default {
  name: 'StoreOrder',
  components: {
    // PrintDialog
  },
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: false,
      // 选中数组
      // ids: [],
      // // 非单个禁用
      // single: true,
      // // 非多个禁用
      // multiple: true,
      // 总条数
      total: 0,
      // 订单表格数据
      vehicleBoxGoodsOrderList: [],
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: '',
        vehicleId: '',
        vehicleNo: '',
        vehicleName: '',
        boxIndex: '',
        orderNo: '',
        createTime: []
      },
      // 表单参数
      form: {},
      // 表单校验
      status: [
        { label: '未支付', name: '0' },
        { label: '已支付', name: '1' },
        { label: '已取货', name: '2' },
        { label: '全部订单', name: 'all' }
      ],
      vehicles: []
    }
  },
  computed: {
    // title() {
    //   const { modes, currentMode } = this.dialog
    //   return modes[currentMode]?.title || ''
    // }
  },
  created() {
    this.getList()
    this.listAllVehicle()
  },
  methods: {
    multiply,
    listAllVehicle() {
      listAllVehicle().then(({ data }) => {
        this.vehicle = data
      })
    },
    /** 查询订单列表 */
    getList() {
      this.loading = true
      this.vehicleBoxGoodsOrderList = []
      const params = { ...this.queryParams }
      params.startTime = params.createTime[0]
      params.endTime = params.createTime[1]
      delete params.createTime
      listVehicleOrder(params).then(response => {
        this.vehicleBoxGoodsOrderList = response.rows
        this.total = response.total
      }).finally(() => {
        this.loading = false
      })
    },
    // // 取消按钮
    // cancel() {
    //   this.open = false
    //   this.reset()
    // },
    // // 表单重置
    // reset(row) {
    //   this.form = JSON.parse(JSON.stringify(row)) || {}
    //   this.resetForm('form')
    // },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    onOrderStatusChange() {
      this.handleQuery()
    },
    viewDetail(id) {
      getVehicleOrder(id).then(({ data }) => {
        this.form = data
        this.open = true
      })
    },
    getStatus(s) {
      const status = {
        0: '未支付',
        1: '已支付',
        2: '已取货'
      }
      return status[s]
    }
  }
}
</script>
<style lang="scss" scoped>
.order-overview {
  float: right;
  text-align: right;
}
</style>
